<script setup lang="ts">
import bg from '@/static/images/coupon_bg.png'
import expiredBg from '@/static/images/coupon_expired_bg.png'

defineProps<{
  type: string
  price: string
  minisum: string
  expireTime: string
  expired?: boolean
  used?: boolean
}>()

defineEmits(['use'])
</script>

<template>
  <view class="relative h-146rpx w-702rpx overflow-hidden rounded-20rpx">
    <image
      class="h-146rpx w-702rpx"
      :src="expired ? expiredBg : bg"
    />
    <view
      class="absolute left-0 top-0 z-10 rounded-br-20rpx rounded-tl-20rpx from-#FF966D to-#FA5431 bg-gradient-to-r p-10rpx text-26rpx text-white font-bold leading-26rpx"
      :style="{
        opacity: used ? '0.4' : '1',
        background: expired ? '#D3D3D3' : 'linear-gradient(90deg, #FF966D 0%, #FA5431 100%)',
      }"
    >
      {{ type }}
    </view>
    <view class="absolute bottom-0 left-0 right-0 top-0 z-10 flex items-center">
      <view
        class="pb-46rpx pl-50rpx pr-70rpx pt-62rpx text-50rpx text-#F53B25 font-black leading-50rpx"
        :style="{
          opacity: used ? '0.4' : '1',
          color: expired ? '#D3D3D3' : '#F53B25',
        }"
      >
        ¥{{ parseInt(price) }}
      </view>
      <view class="flex flex-grow-1 items-center justify-between px-30rpx">
        <view>
          <Spacer height="7" />
          <view class="text-28rpx text-#666666 font-medium leading-28rpx">
            {{ `满${parseInt(minisum)}元可使用` }}
          </view>
          <Spacer height="16" />
          <view class="text-28rpx text-#999999 font-medium leading-28rpx">
            {{ `${expireTime}截止` }}
          </view>
        </view>
        <button v-if="!expired && !used" class="mx-0 rounded-full bg-#FA662F px-13rpx py-15rpx text-28rpx text-white font-medium leading-28rpx" @tap.stop="$emit('use')">
          立即使用
        </button>
      </view>
    </view>
    <view v-if="used" class="absolute inline-block bg-#FFDBCF px-72rpx pb-40rpx pt-20rpx text-22rpx text-#FA662F leading-22rpx -bottom-20rpx -right-80rpx -rotate-45deg">
      已使用
    </view>
  </view>
</template>
